<template>
	<view class="order-content">
		<scroll-view scroll-y="true" style="height: calc(100vh - 40rpx);width: 100%;">
			<view class="order-item" v-for="item in dataList" :key="item.id" @click="gotoDetail(item.id)">
				<view class="order-info">
					<view>订单编号：{{item.order_no}}</view>
					<view>{{item.status == 0?'待支付':(item.status == -1?'已取消':'已购买')}}</view>
				</view>
				<view class="order-goods">
					<view class="goods-image">
						<image v-if="item.type == 1" :src="item.excellent_course.full_cover" mode=""></image>
						<image v-if="item.type == 2" :src="item.video_course.full_cover" mode=""></image>
					</view>
					<view class="goods-info">
						<view>{{item.title}}</view>
						<view><text>￥</text>{{item.pay_amount}}</view>
					</view>
				</view>
				<view class="order-btn" v-if="item.status == 0">
					<u-button shape="circle" size="mini" :hair-line="false" :custom-style="leftBtn" @click="getCancelOrders(item.id)">取消订单</u-button>
					<u-button shape="circle" size="mini" :custom-style="rightBtn" type="success" @click="pay(item.order_no)">立即支付</u-button>
				</view>
				<view class="order-btn" v-if="item.status == 1">
					<!-- <u-button shape="circle" size="mini" :hair-line="false" :custom-style="leftBtn" @click="">申请售后</u-button> -->
					<u-button shape="circle" size="mini" :custom-style="rightBtn" type="success" @click="goStudy(item)">去学习</u-button>
				</view>
				<view class="order-btn" v-if="item.status == -1">
					<u-button shape="circle" size="mini" :hair-line="false" :custom-style="leftBtn" @click="getDelOrders(item.id)">删除订单</u-button>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import { getOrderlist,getCancelOrder,getDelOrder} from '@/api/user.js';
	import { orderPayDY } from '@/api/pay.js';
	import { baseUrl } from '@/config/config.js'
import { toast } from '../../utils/common';
	export default {
		data() {
			return {
				dataList: [],
				leftBtn: {
					color: '#666666',
					border: '1rpx solid #E6E6E6',
					background: "#fff",
					marginRight: "20rpx"
				},
				rightBtn: {
					color: '#fff',
					background: "#2AC092"
				},
				page:1,
				loadStatus:'more'
			}
		},
		mounted() {
			this.getOrderlists();
			
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			this.page++;
			console.log(123122);
			this.getOrderlists()
		},
		methods:{
			gotoDetail(){
				uni.navigateTo({
					url:'/pagesA/orderDetail/index?id=' + id
				})
			},
			goStudy(item) {
				uni.navigateTo({
					url:'/pagesA/courseDetail/index?type=1' + '&ids=' + item.excellent_course.excellent_course_id
				})
			},
			// 获取订单列表
			getOrderlists(){
				let that = this;
				getOrderlist({page:this.page}).then(res=>{
					console.log(8888888,res.data.list);
					
					let arr = res.data.list;
					if(arr.length == 0){
						that.loadStatus = 'noMore'
					}else{
						this.dataList = arr;
						that.loadStatus = 'more'
					}
				})
			},
			// 取消订单
			getCancelOrders(id){
				let that = this
				getCancelOrder({order_id:id}).then(res=>{
					// console.log(88585,res);
					toast('已取消')
					that.getOrderlists()
				}).catch()
			},
			// 删除订单
			getDelOrders(id){
				let that = this
				getDelOrder({order_id:id}).then(res=>{
					toast('已删除')
					that.getOrderlists()
				}).catch()
			},
			// 支付订单
			pay(orderNo){
				orderPayDY({order_no:orderNo}).then(res=>{
					if(res.data.code!== 200){
						toast(res.data.message)
					}else{
						uni.requestPayment({
							provider: 'alipay',
							orderInfo:res.data.data,
							service:5,
							getOrderStatus: function(resp) {
								console.log(resp);
							},
							success: function(res) {
								// success && success(res.data);
								// that.paySuccess = true
								toast('支付成功')
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
								// fail && fail(err.data);
							},
							complete(ress) {
								console.log(ress);
								// complete && complete(ress.data);
							}
						});
					}
					
				}).catch()
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;

		.order-info {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E6E6E6;

			>view:nth-child(1) {
				color: #333;
			}

			>view:nth-child(2) {
				color: #2AC092;
			}
		}

		.order-goods {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			.goods-image {
				width: 240rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				overflow: hidden;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.goods-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 30rpx;

				>view:nth-child(2) {
					font-size: 36rpx;
					color: #FF6D6A;

					>text {
						font-size: 28rpx;
					}
				}
			}
		}

		.order-btn {
			display: flex;
			justify-content: flex-end;
			padding-top: 20rpx;
		}
	}
</style>